<template>
    <div>
        <div style="width: 100%;margin-bottom: 10px">
            <div style="width: 300px;float: left;">
                <el-input v-model="name" clearable placeholder="资源名称"></el-input>
            </div>
            <div style="width: 300px;margin-top: 2px;margin-left: 310px;">
                <el-select clearable v-model="type" style="width: 300px" placeholder="请选择类型" :label-width="formLabelWidth">
                    <el-option
                            v-for="item in typeList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div style="margin-top: -40px;margin-left: 620px;">
                <el-button type="primary" @click="selectinfo">搜索</el-button>
            </div>
            <div style="margin-top: -40px;margin-left: 700px;">
                <el-button type="success" @click="create">创建资源</el-button>
            </div >
        </div>
        <el-table
                :data="tableData"
                style="width: 100%;margin-bottom: 20px;"
                row-key="id"
                border
                default-expand-all>
            <el-table-column
                    prop="name"
                    label="资源名称"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="mobile"
                    label="联系电话"
                    align="center"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="地址"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="type_name"
                    label="类型"
                    align="center"
                    width="100">
            </el-table-column>
            <el-table-column label="操作" width="300" align="center">
                <template scope="scope">
                    <el-button
                            size="mini"
                            type="success"
                            @click="update(scope.row)">编辑</el-button>
                    <el-button
                            size="mini"
                            type="primary"
                            @click="plan(scope.row)">分配账号</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="del(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNo"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next"
                :total="totalRecord" class="text-center mt10">
        </el-pagination>
        <!-- 创建资源弹出框 -->
        <el-dialog :visible.sync="createRoleVisible" width="650px">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
                <el-form-item label="资源名称：" :label-width="formLabelWidth" prop="resourcesName">
                    <div style="width: 320px"><el-input v-model="ruleForm.resourcesName" ></el-input></div>
                </el-form-item>
                <el-form-item label="电话：" :label-width="formLabelWidth" prop="resourcesTel">
                    <div style="width: 320px"><el-input v-model="ruleForm.resourcesTel" ></el-input></div>
                </el-form-item>
                <el-form-item label="地址：" :label-width="formLabelWidth" prop = "resourcesAddress">
                    <div style="width: 320px"><el-input v-model="ruleForm.resourcesAddress" ></el-input></div>
                </el-form-item>
                <el-form-item label="类型：" :label-width="formLabelWidth">
                    <el-select v-model="ruleForm.resources_type" placeholder="请选择类型" class="w320">
                        <el-option
                                v-for="item in typeList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="createRoleVisible = false">取 消</el-button>
                <el-button type="primary" @click="createResources">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 编辑资源弹出框 -->
        <el-dialog :visible.sync="updateRoleVisible" width="650px">
            <el-form :model="updateForm" :rules="updaterules" ref="updateForm">
                <el-form-item label="资源名称：" :label-width="formLabelWidth" prop="name">
                    <div style="width: 320px"><el-input v-model="updateForm.name" ></el-input></div>
                </el-form-item>
                <el-form-item label="电话：" :label-width="formLabelWidth" prop="mobile">
                    <div style="width: 320px"><el-input v-model="updateForm.mobile" ></el-input></div>
                </el-form-item>
                <el-form-item label="地址：" :label-width="formLabelWidth" prop = "address">
                    <div style="width: 320px"><el-input v-model="updateForm.address" ></el-input></div>
                </el-form-item>
                <el-form-item label="类型：" :label-width="formLabelWidth">
                    <el-select v-model="updateForm.type" placeholder="请选择类型" class="w320">
                        <el-option
                                v-for="item in typeList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            {{item.label}}
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="updateRoleVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateResources">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 分配账号弹出框 -->
        <el-dialog :visible.sync="planRoleVisible" width="950px">
            <div >
                <div style="width: 100%">
                    <div style="width: 300px;float: left;">
                        <el-input v-model="userName" placeholder="用户名"></el-input>
                    </div>
                    <div style="width: 300px;margin-top: 2px;margin-left: 310px;">
                        <el-input v-model="roleName" placeholder="姓名"></el-input>
                    </div>
                    <div style="margin-top: -40px;margin-left: 620px;">
                        <el-button type="primary" @click="inquire">搜索</el-button>
                    </div>
                    <div style="margin-top: -40px;margin-left: 800px;">
                        <el-button type="success" @click="add">创建用户</el-button>
                    </div >
                </div>
                <div style="width: 100%;margin-top: 20px">
                    <div >
                        <!-- 用户列表-->
                        <el-table
                                :data="planTableData"
                                border
                                style="width: 100%">
                            <el-table-column
                                    prop="login_name"
                                    label="用户名"
                                    align="center"
                                    width="150">
                            </el-table-column>
                            <el-table-column
                                    prop="name"
                                    label="姓名"
                                    align="center"
                                    width="150">
                            </el-table-column>
                            <el-table-column
                                    prop="rolenames"
                                    label="角色"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    prop="create_time"
                                    label="创建时间"
                                    align="center"
                                    width="170">
                            </el-table-column>
                            <el-table-column
                                    label="操作"
                                    align="center"
                                    width="200">
                                <template slot-scope="scope">
                                    <el-button
                                            type="success"
                                            size="mini"
                                            @click="handleEdit(scope.row)">编辑</el-button>
                                    <el-button
                                            type="danger"
                                            size="mini"
                                            @click="handleDelete(scope.row.id)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
        </el-dialog>

        <!--添加角色弹出框-->
        <el-dialog title="人员" :visible.sync="addUserVisible" width="650px">
            <el-form :model="planRuleForm" :rules="addrules" ref="planRuleForm" label-width="180px"
                     class="demo-ruleForm">
                <el-form-item label="账号：" prop="login_name">
                    <div style="width: 320px"><el-input v-model="planRuleForm.login_name"></el-input></div>
                </el-form-item>
                <el-form-item label="姓名：" prop="name">
                    <div style="width: 320px"><el-input v-model="planRuleForm.name"></el-input></div>
                </el-form-item>
                <el-form-item label="电话：" prop="mobile">
                    <div style="width: 320px"><el-input v-model="planRuleForm.mobile"></el-input></div>
                </el-form-item>
                <el-form-item label="角色：" prop="role">
                    <el-checkbox-group v-model="planForm">
                        <el-checkbox v-for="item in updateroleList" :key=item.role_id
                                     :label=item.role_id>
                            {{item.role_name}}
                        </el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addUserVisible = false">取 消</el-button>
                <el-button type="primary" @click="yes">确 定</el-button>
            </div>
        </el-dialog>


        <!--修改角色弹出框-->
        <el-dialog title="人员" :visible.sync="updateVisible">
            <el-form :model="updateRoleForm" :rules="updateRoleRules" ref="updateRoleForm" label-width="180px"
                     class="demo-ruleForm">
                <el-form-item label="账号：" prop="login_name">
                    <div style="width: 320px"><el-input v-model="updateRoleForm.login_name" readonly></el-input></div>
                </el-form-item>
                <el-form-item label="姓名：" prop="name">
                    <div style="width: 320px"><el-input v-model="updateRoleForm.name"></el-input></div>
                </el-form-item>
                <el-form-item label="电话：" prop="mobile">
                    <div style="width: 320px"><el-input v-model="updateRoleForm.mobile"></el-input></div>
                </el-form-item>
                <el-form-item label="角色：" prop="role">
                    <el-checkbox-group v-model="updateRoleform">
                        <el-checkbox
                                v-for="item in updateroleList"
                                :key=item.role_id
                                :label=item.role_id>
                            {{item.role_name}}
                        </el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="updateVisible = false">取 消</el-button>
                <el-button type="primary" @click="determine">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>
<script>
    export default {
        data () {
            var checkPhone = (rule, value, callback) => {//验证手机号
                if (!value) {
                    return callback(new Error('手机号不能为空'));
                } else {
                    const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
                    if (reg.test(value)) {
                        callback();
                    } else {
                        return callback(new Error('请输入正确的手机号'));
                    }
                }
            };
            return {

                planRoleVisible:false,//分配账号弹出框
                userName:'',//用户名
                roleName:'',//姓名
                planTableData:[],//配置用户数据
                addUserVisible:false,//添加角色弹出框
                updateroleList:[],//角色列表数据
                planForm:[],//绑定角色
                planRuleForm:{
                    login_name:'',
                    name:'',
                    mobile:''
                },//添加的数据
                updaterole:[],
                updateRoleForm:{
                    login_name:'',
                    name:'',
                    mobile:''
                },
                updateVisible:false,//角色修改弹出框
                upid:'',//角色修改传id
                updateRoleform:'',

                addrules: {   //验证
                    login_name: [
                        {required: true, message: '请输入账号名称', trigger: 'blur'}
                    ],
                    name: [
                        {required: true, message: '请输入姓名', trigger: 'blur'}
                    ],
                    mobile: [
                        {validator: checkPhone, trigger: 'blur',required: true}
                    ],
                    role: [
                        { trigger: 'change'}
                    ]

                },
                updateRoleRules: {   //修改时的验证
                    login_name: [
                        {required: true, message: '请输入账号名称', trigger: 'blur'}
                    ],
                    name: [
                        {required: true, message: '请输入姓名', trigger: 'blur'}
                    ],
                    mobile:  [
                        {validator: checkPhone, trigger: 'blur',required: true}
                    ],
                    role: [
                        { trigger: 'change'}
                    ]

                },
                planId:'',



                form:{},
                name:'',//绑定搜索的资源名
                type:'',//绑定搜索的资源类型
                tableData:[],//数据表格
                formLabelWidth:'180px',//文字宽度
                createRoleVisible:false,//创建弹出框
                updateRoleVisible:false,//修改弹出框
                updateId:'',//修改传的id
                pageNo: 1,
                pageSize: 10,
                totalRecord: 0,
                totalPage: 0,
                typeList:[],//下拉列表数据
                ruleForm: {},
                rules: {//创建验证
                    resourcesName: [
                        { required: true, message: '请输入活动名称', trigger: 'blur' },
                    ],
                    resourcesTel: [
                        {validator: checkPhone, trigger: 'blur',required: true}
                    ],
                    resourcesAddress: [
                        { required: true, message: '请输入地址', trigger: 'blur' },
                    ]
                },
                updateForm: {},
                updaterules: {//修改验证
                    name: [
                        { required: true, message: '请输入活动名称', trigger: 'blur' },
                    ],
                    mobile: [
                        {validator: checkPhone, trigger: 'blur',required: true}
                    ],
                    address: [
                        { required: true, message: '请输入地址', trigger: 'blur' },
                    ]
                },
            }
        },
        methods : {


            /*分配账号*/
            async plan(row){
                console.log(row)
                this.planRoleVisible = true
                this.planId = row.id

                const planres = await this.$http('userList', {//用户列表
                    grid_id: this.planId,
                });
                this.planTableData = planres.results

                const roleRes = await this.$http('roleList', {})//角色列表
                this.updateroleList = roleRes
                console.log('this.updateroleList',this.updateroleList)
            },

            /*查询用户数据*/
            async inquire() {
                const res = await this.$http('userList', {
                    login_name: this.userName,
                    name: this.roleName,
                    grid_id: this.planId,
                });
                this.planTableData = res.results

                this.userName = ''
                this.roleName = ''
            },

            /*用户添加功能*/
            async add() {
                this.addUserVisible = true
                this.planRuleForm.login_name = ''
                this.planRuleForm.name = ''
                this.planRuleForm.mobile = ''
            },
            /*点击确定创建用户*/
            async yes() {
                this.addUserVisible = false
                this.updaterole = this.planForm.join(',')
                await this.$http('createUser', {
                    login_name: this.planRuleForm.login_name,
                    name: this.planRuleForm.name,
                    mobile: this.planRuleForm.mobile,
                    rolelist: this.updaterole,
                    grid_id: this.planId
                })

                const planres = await this.$http('userList', {//用户列表
                    grid_id: this.planId,
                });
                this.planTableData = planres.results

                const roleRes = await this.$http('roleList', {})//角色列表
                this.updateroleList = roleRes
            },


            /*角色修改功能*/
            async handleEdit(row) {
                console.log('chuande',row)
                this.updateRoleForm = row
                this.upid = row.id
                this.updateRoleform = row.rolelist.split(',');
                this.updateVisible = true
            },


            /*确认修改，点击修改用户*/
            async determine() {
                this.updateVisible = false

                this.updateRoleform = this.updateRoleform.join(',')

                const res = await this.$http('createUser', {
                    login_name: this.updateRoleForm.login_name,
                    name: this.updateRoleForm.name,
                    mobile: this.updateRoleForm.mobile,
                    rolelist: this.updateRoleform,
                    id: this.upid,
                    //name: this.updateForm.name,
                });
                if (res === 'chenggong') {
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    });
                    const planres = await this.$http('userList', {//用户列表
                        grid_id: this.planId,
                    });
                    this.planTableData = planres.results
                } else {
                    this.$message({
                        message: '修改失败',
                        type: 'error'
                    });
                }
            },

            /*删除用户*/
            async handleDelete(id) {

                this.$confirm('将永久删除该用户, 是否继续?', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    const res = await this.$http('deleteUser', {
                        id: id
                    });
                    this.init();
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    const planres = await this.$http('userList', {//用户列表
                        grid_id: this.planId,
                    });
                    this.planTableData = planres.results
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },








            /*初始化方法*/
            async init () {
                const res = await this.$http('resourceslist',this.form);
                this.tableData = res.results
                console.log(this.tableData)
                this.totalPage = res.totalPage;
                this.totalRecord = res.totalRecord;
                const typeres = await this.$http('getlistbytypelist',{
                    type:'resources_type'
                });
                console.log('xiala',typeres)
                this.typeList = typeres


            },

            //分页
            async handleSizeChange(val) {
                this.form.pageSize = val;
                this.init();
            },
            async handleCurrentChange(val) {
                this.form.pageNo = val;
                this.init();
            },
            /*打开创建窗口*/
            async create(){
                this.createRoleVisible = true

            },
            /*打开修改窗口*/
            async update(row){
                console.log('rrrrrrrrrrrrr',row)
                this.updateRoleVisible = true
                this.updateForm = row
                this.updateId = row.id
            },


            /*创建资源接口*/
            async createResources(){
                const res = await this.$http('createResources', {
                    name : this.ruleForm.resourcesName,
                    mobile : this.ruleForm.resourcesTel,
                    address : this.ruleForm.resourcesAddress,
                    rtype : this.ruleForm.resources_type,
                });
                console.log('返回值',res)
                if(res === "chenggong"){
                    this.createRoleVisible = false;
                    this.$message({message: '保存成功',type: 'success'});
                    this.init();
                }else{
                    this.$message.error('保存失败');
                }
                this.ruleForm.resourcesName=''
                this.ruleForm.resourcesTel=''
                this.ruleForm.resourcesAddress=''
                this.ruleForm.resources_type=''
                this.init()
            },



            /*修改资源接口*/
            async updateResources(){
                await this.$http('createResources', {
                    id:this.updateId,
                    name : this.updateForm.name,
                    mobile : this.updateForm.mobile,
                    address : this.updateForm.address,
                    rtype : this.updateForm.type,
                });
                this.init()
                this.updateRoleVisible = false
            },
            /*删除资源接口*/
            async del(row){
                console.log('删除',row)
                this.$confirm('将永久删除该资源, 是否继续?', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    await this.$http('createResources', {
                        id:row.id,
                        del_flag:'1',
                    });
                    this.init();
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            /*查询*/
            async selectinfo(){
                const res = await this.$http('resourceslist',{
                    name : this.name,
                    type : this.type,
                });
                this.tableData = res.results
                this.totalPage = res.totalPage;
                this.totalRecord = res.totalRecord;

            }
        },
        mounted () {
            this.init();
        },
    }
</script>

<style scoped>
    .w320{
        width: 320px
    }
</style>
